import React from 'react'
import { useState, useEffect } from 'react'
import { Input, Space, Select } from 'antd';
import { CameraOutlined, UpOutlined } from '@ant-design/icons';
import '../style/Search.css'
const { Search } = Input;

const onSearch = (value, _e, info) => console.log(info?.source, value);
const options = ['全部', 'H5', '海报', '长页', '表单', '互动', '电子画册', '视频', '解决方案',];

const keywords = {
    全部: ['邀请函', '小游戏', '招聘', '简历', '物业工作汇报', '古风', '答题'],
    H5: ['邀请函', '婚礼邀请函', '物业', '招聘', '清明节', '峰会邀请函'],
    海报: ['邀请函', '清明', '招聘', '促销', '开业', '生日会', '初五迎财神'],
    长页: ['邀请函', '公众号', '物业', '总结', '介绍', '招商加盟', '招生模版'],
    表单: ['报名表', '会议报名表', '满意度调查', '美食', '表彰', '瑜伽', '评价'],
    互动: ['小游戏', '答题', '树', '健康', '红包', '打地鼠', '打卡'],
    电子画册: ['电子画册', '家具', '家装', '产品手册', '招聘', '物业', '红色'],
    视频: ['邀请函', '片头片尾', '企业简介', '年会开场', '招生', '商务'],
    解决方案: ['邀请函', '邀请函', '邀请函', '银行', '介绍']
}

function Index() {
    const [visible, setvisible] = useState(false)
    const [showHotSearch, setShowHotSearch] = useState(false);
    const [words, setwords] = useState(keywords[options[0]])
    const [second, setsecond] = useState(keywords[options[0]])
    const [currentIndex, setCurrentIndex] = useState(0);
    const [isFixed, setIsFixed] = useState(false);

    const handleScroll = () => {
        const box = document.getElementById('box'); // 获取盒子元素
        const boxPosition = box.getBoundingClientRect(); // 获取盒子在视口中的位置信息

        if (boxPosition.top < 0) {
            setIsFixed(true); // 当盒子脱离可视窗口时，设置状态使其固定
        } else {
            setIsFixed(false); // 当盒子在可视窗口内时，取消固定状态
        }
    };

    const onMouseEnter = () => {
        setvisible(true)
    }
    const onMouseLeave = () => {
        setvisible(false)
    }
    const handleSearchBoxClick = () => {
        setShowHotSearch(true);
        // 在这里可以获取并显示热门搜索榜数据
    };
    const handleDocumentClick = (e) => {
        const searchBox = document.getElementById('search-box');

        if (searchBox && searchBox.contains(e.target)) {
            // 点击在搜索框内部，不进行任何操作
            return;
        }
        setShowHotSearch(false);
    };
    const handleProvinceChange = (value) => {
        setwords(keywords[value]);
        console.log(keywords[value]);
        setsecond(keywords[value][0]);
    };
    const onSecondCityChange = (value) => {
        setsecond(value);
    };
    const tit = [
        {
            value: '邀请函'
        },
        {
            value: '小游戏'
        },
        {
            value: '招聘'
        },
        {
            value: '简历'
        },
        {
            value: '物业工作汇报'
        },
        {
            value: '古风'
        },
        {
            value: '答题'
        },
        {
            value: '物业周报'
        },
        {
            value: '婚礼邀请函'
        },
        {
            value: '汽车销售'
        },
    ]

    const listItems = words.map((item, index) => {
        return <span key={index} onChange={onSecondCityChange} style={{ marginLeft: 18 }} className='listItem'>
            {item}
        </span>
    })

    useEffect(() => {
        document.addEventListener('click', handleDocumentClick);

        const interval = setInterval(() => {
            setCurrentIndex(prevIndex => (prevIndex + 1) % listItems.length);
        }, 2000); // 切换间隔时间为2秒

        window.addEventListener('scroll', handleScroll); // 监听滚动事件

        return () => {
            document.removeEventListener('click', handleDocumentClick);
            clearInterval(interval);
            window.removeEventListener('scroll', handleScroll); // 组件卸载时移除事件监听
        };
    }, []);


    return (
        <div>
            <Space.Compact id='box' style={{ marginLeft: 700, position: isFixed ? 'fixed' : 'relative', top: isFixed ? '20px' : 'auto', right: isFixed ? '60px' : 'auto', width: '470px', height: '34px' }}>
                <Select defaultValue={options[0]}
                    options={options.map((option) => ({
                        label: option,
                        value: option
                    }))}
                    suffixIcon={<UpOutlined />}
                    listHeight='288px'
                    open={visible}
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}
                    onChange={handleProvinceChange}
                    style={{
                        width:100,
                        textAlign:'center'
                    }}
                />
                <Search
                    // addonBefore="https://"
                    placeholder={words[currentIndex]}
                    allowClear
                    onSearch={onSearch}
                    style={{
                        width: 400,
                        // border: '1px solid #4096ff'
                    }}
                    enterButton
                    suffix={<CameraOutlined />}
                    onClick={handleSearchBoxClick}
                    id="search-box"
                />
            </Space.Compact>
            <div className='words'>
                {listItems}
                {/* {
                    words && words.map((item, index) => 
                        <span key={index} onChange={onSecondCityChange} style={{marginLeft:18}}>
                            {item}
                        </span>
                    )
                } */}
            </div>
            {showHotSearch && (
                <div className="hot-search-list" id='box' style={{ position: isFixed ? 'fixed' : 'relative', top: isFixed ? '52px' : 'auto', right: isFixed ? '60px' : 'auto' }}>
                    <div className='hot'>
                        <h3>热搜榜</h3>
                    </div>
                    <div className='title'>
                        <ul className="numbered-list">
                            {/* <li>邀请函</li>
                            <li>小游戏</li>
                            <li>招聘</li>
                            <li>简历</li>
                            <li>物业工作汇报</li>
                            <li>古风</li>
                            <li>答题</li>
                            <li>物业周报</li>
                            <li>婚礼邀请函</li>
                            <li>汽车销售</li> */}
                            {
                                tit && tit.map((item, index) => {
                                    return <li key={index}>
                                        {item.value}
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </div>
            )}
        </div>
    )
}

export default Index
